<template>
  <div class="ruoyi-form-wrap">
    <div class="ruoyi-form-head">
      <div class="ruoyi-form-head-left"></div>
      <div class="ruoyi-form-head-right">
        <el-button @click="showPreview">预览</el-button>
        <el-button @click="saveJson">保存</el-button>
      </div>
    </div>
    <div class="ruoyi-form-body">
      <div class="ruoyi-form-item">
        <FormItem></FormItem>
      </div>
      <div class="ruoyi-form-draggable">
        <FormBody></FormBody>
      </div>
      <div class="ruoyi-form-attr">
        <FormAttr></FormAttr>
      </div>
    </div>
    <el-dialog
      title="预览"
      :visible.sync="previewShow"
      width="1000"
      append-to-body
      destroy-on-close
      :close-on-click-modal="false" :close-on-press-escape="false"
       >
      <FormPreview></FormPreview>

    </el-dialog>
  </div>
</template>
<script >
import FormItem from "./components/FormItem/index.vue";
import FormBody from "./components/FormBody/index.vue";
import FormAttr from "./components/FormAttr/index.vue";
import FormPreview from "./components/FormPreview/index.vue";
import {mapState} from "vuex"
import {getAction, putAction} from "../../../../utils/request";
export  default {
  name:"Form",
  props:{
    id:{
      type:String
    }
  },
  data(){
    return {
      previewShow:false,
    }
  },
  mounted() {

    getAction('/demo/form/' + this.id).then(res=>{
      if(res.data.formJson){
        this.$store.dispatch("formGen/SET_LAYOUTS",JSON.parse(res.data.formJson));
      }else{
        this.$store.dispatch("formGen/SET_LAYOUTS",{
          layouts:[],
          formConfig:{
            labelPosition:"top"
          },
        });
      }
    })
  },
  components:{
    FormItem,
    FormBody,
    FormAttr,
    FormPreview
  },
  computed:{
    ...mapState({
      layouts:state=>state.formGen.layouts,
      formConfig:state=>state.formGen.formConfig,
    })
  },
  methods:{
    showPreview(){
      this.previewShow = true;
    },
    saveJson(){
      console.log(this.id)
      putAction( '/demo/form/json',{
        id:this.id,
        formJson: JSON.stringify({
          layouts:this.layouts,
          formConfig:this.formConfig,
        })
      }).then(res=>{
        this.$message.success("保存成功")
      })
    }
  }

}
</script>
<style scoped lang="scss">
.ruoyi-form-wrap{
  width: 100%;
  height: calc(100vh - 84px);
}
.ruoyi-form-head{
  width: 100%;
  height: 54px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
}
.ruoyi-form-head-right{
  height: 100%;
  display: flex;
  align-items: center;
  padding-right:20px;
}
.ruoyi-form-body{
  width: 100%;
  display: flex;
  height: calc(100% - 54px);
}
.ruoyi-form-item,
.ruoyi-form-attr{
  width: 260px;
  height: 100%;
}
.ruoyi-form-item{
  border-right: 1px solid #ccc;
}
.ruoyi-form-attr{
  border-left: 1px solid #ccc;
}
.ruoyi-form-draggable{
  flex:1;
  height: 100%;
  overflow-y: auto;
}
</style>






